<template>
  <view v-if="!isLoading">
    <xy-title :title="detail.title"></xy-title>


    <view class="" v-if="detail.is_empty==0">
      <rich-text class="rich" :nodes="detail.content"></rich-text>
    </view>
    <view class="empty" v-else>
      <image mode="widthFix" :src="$xyfun.image('/static/images/benfit/empty.png')"></image>
      <text>福利加急上架中，敬请期待</text>
    </view>

    <!--核销码弹窗-->
    <block>
      <view class="xy-modal-box xy-modal-box-center qrcode-model-box p-tb-20 p-lr-30 br-10 bg-w" :class="[verifyCodeModelShow?'xy-modal-show':'']">
        <view class="verify_code">
          <image class="image" :src="qrcodepath"></image>
          <view class="m-t-30 tc">核销码</view>
        </view>
      </view>
      <view class="xy-modal-mask" :class="[verifyCodeModelShow?'xy-mask-show':'']" @tap="closeQrCode()"></view>
    </block>

    <!-- 二维码绘制 -->
    <view class="hide-canvas">
      <canvas canvas-id="qrcode" style="width: 300px;height: 300px;"></canvas>
    </view>

    <view class="submit_box" v-if="record" @tap="drawQrCode">
      <view class="submit">立即使用</view>
    </view>

  </view>
</template>

<script>
import xyTitle from "@/components/xy-title/index.vue";
import uQRCode from '@/utils/uqrcode';

export default {
  components: {xyTitle},
  data() {
    return {
      isLoading: true,
      id:'',
      detail: {},
      record: {},

      verifyCodeModelShow:false,
      qrcodepath: '',
    };
  },
  async onLoad(options) {
    if(options?.id){
      this.id = options.id;
    }
    this.loadData();
  },
  methods: {
    async loadData(){
      var that = this;
      this.$api.post({
        url: '/benfit/benfit',
        loadingTip:'加载中...',
        data: {
          id:that.id,
        },
        success: res => {
          this.detail = res.detail;
          this.record = res.record;
          this.isLoading = false;
        }
      });
    },

    //去核销
    drawQrCode() {
      var that = this;
      uQRCode.make({
        canvasId: 'qrcode',
        text: 'verify_benfit_'+this.record.id,
        size: 300,
        success: res => {
          this.qrcodepath = res;
        }
      });
      this.verifyCodeModelShow = true;
    },

    //关闭核销码
    closeQrCode(){
      clearInterval(this.intervalId);
      this.verifyCodeModelShow = false;
    }

  }
}
</script>

<style>
page{
  /*  background: #3c558e; */
}
</style>
<style lang="scss">
.empty{
  padding-top: 24vh;
  text-align: center;
  image{
    display: block;
    margin: 0 auto;
  }
  text{
    color: #999;
    margin-top: 40rpx;
    display: block;
    font-size: 36rpx;
    letter-spacing: 4rpx;
    text-align: center;
  }
}
.verify_code{
  width: 400rpx;
  height: 450rpx;
  text-align: center;
  image{
    margin-top: 10rpx;
    display: inline-block;
    width: 380rpx;
    height: 380rpx;
  }
}
.submit_box{
  position: fixed;
  bottom: 20rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  padding: 20rpx 30rpx 80rpx 30rpx;
  .submit{
    font-size: 34rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 20rpx;
    background: #3c558e;
    color: #fff;
  }
}

.rich [src]{
  max-width: 100vw !important;
}

</style>
